<template>
	<div class="insert_div">
		<h1>房屋新增</h1>
		
		<div class="input_div">
			<span>房屋标题</span>
			<span>
				<el-input
				  placeholder="房屋标题"
				  v-model="form.subject"
				  clearable>
				</el-input>
			</span>
		</div>
		
		<div class="input_div">
			<span>房屋封面</span>
			<span>
				<!-- 上传组件 -->
				<el-upload
				  class="avatar-uploader"
				  :action="uploadUrl"
				  :show-file-list="false"
				  :on-success="uploadSucc">
				  <!-- 图片回显 -->
				 <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
				 <el-image
					class="avatar"
				    :src="imageUrl"
					v-if="imageUrl"
				    fit="cover"></el-image>
				  <!-- 没有图片时，展示的+号 -->
				  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</span>
		</div>
		
		<div class="input_div">
			<span>所在城市</span>
			<span>
				<el-input
				  placeholder="所在城市"
				  v-model="form.city"
				  clearable>
				</el-input>
			</span>
		</div>
		
		<div class="input_div">
			<span>小区名称</span>
			<span>
				<el-input
				  placeholder="小区名称"
				  v-model="form.xiaoqu"
				  clearable>
				</el-input>
			</span>
		</div>
		
		<div class="input_div">
			<span>房屋地址</span>
			<span>
				<el-input
				  placeholder="房屋地址"
				  v-model="form.address"
				  clearable>
				</el-input>
			</span>
		</div>
		
		<div class="input_div">
			<span>房屋售价</span>
			<span>
				<el-input
				  placeholder="房屋售价"
				  v-model="form.price"
				  clearable>
				</el-input>
			</span>
		</div>
		
		<div class="input_div">
			<span>几室</span>
			<span>
				<el-input
				  placeholder="几室"
				  v-model="form.jishi"
				  clearable>
				</el-input>
			</span>
		</div>
		
		<div class="input_div">
			<span>几厅</span>
			<span>
				<el-input
				  placeholder="几厅"
				  v-model="form.jiting"
				  clearable>
				</el-input>
			</span>
		</div>
		
		<div class="input_div">
			<span>经度</span>
			<span>
				<el-input
				  placeholder="经度"
				  v-model="form.lng"
				  clearable>
				</el-input>
			</span>
		</div>
		
		<div class="input_div">
			<span>纬度</span>
			<span>
				<el-input
				  placeholder="纬度"
				  v-model="form.lat"
				  clearable>
				</el-input>
			</span>
		</div>
		
		<div class="input_div" style="width: 600px; height: 400px; background-color: aquamarine; margin-bottom: 10px;">
			<baidu-map 
				scroll-wheel-zoom="true"
				continuous-zoom="true"
				:center="center" 
				:zoom="zoom" 
				@click="clickMap"
				class="bm-view">
			</baidu-map>
		</div>
		
		
		<div class="input_div">
			<span>描述信息</span>
			<el-input
			  type="textarea"
			  style="width: 400px;"
			  :rows="4"
			  placeholder="请输入房屋的描述信息"
			  v-model="form.info">
			</el-input>
		</div>
		
		<div class="input_div">
			<span>
				<el-button @click="insertHouse" type="primary">新增房屋</el-button>
			</span>
		</div>
		
	</div>
</template>

<script>
	export default {
		data(){
			return {
				//图片回显的地址
				imageUrl: "",
				//上传的地址
				uploadUrl: "http://localhost:8888/file/upload",
				//房屋信息
				form: {
					subject: "",
					image: "",
					city: "",
					xiaoqu: "",
					address: "",
					price: "",
					jishi: "",
					jiting: "",
					lat: "",
					lng: "",
					info: ""
				},
				//百度地图
				center: "深圳市",
				zoom: 12
			}
		},
		methods: {
			//点击百度地图
			clickMap(e){
				console.log("点击了", e);
				this.form.lat = e.point.lat;
				this.form.lng = e.point.lng;
			},
			//图片上传成功后的回调方法
			uploadSucc(response){
				console.log("图片上传成功了！！！！", response);
				//上传后的图片名称记录下来，保存到数据库中
				this.form.image = response;
				//图片回显
				this.imageUrl = "http://localhost:8888/file/download?fileName=" + response;
			},
			//新增房屋信息
			insertHouse(){
				this.axios({
					method: "POST",
					url: "http://localhost:8888/house/insert",
					data: this.form
				}).then((result) => {
					this.$message({
					  message: '恭喜你，房屋添加成功！',
					  type: 'success'
					});
					
					//清空数据
					this.form = {
						subject: "",
						image: "",
						city: "",
						xiaoqu: "",
						address: "",
						price: "",
						jishi: "",
						jiting: "",
						lat: "",
						lng: "",
						info: ""
					};
				}).catch(() => {
					this.$message({
					  message: '恭喜你，服务器发生异常！',
					  type: 'error'
					});
				})
			}
		}
	}
</script>

<style>
	.insert_div {
		padding: 20px;
		box-sizing: border-box;
		overflow: scroll;
	}
	
	.input_div {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}
	
	.input_div span{
		margin: 10px;
	} 
	
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
	  
	  .bm-view {
		  width: 100%;
		  height: 100%;
	  }
</style>